import React, { useRef } from 'react';
import { listAppTypeList } from '@/services/configserver/api';
import { useIntl, FormattedMessage } from 'umi';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Modal } from 'antd';

export type ShowAppTypeModalProps = {
    onChoose: (values: API.AppTypeInfoListItem) => Promise<void>;
    onClose: () => void;
    onVisibleChange: (visible: boolean) => void;
    showAppTypeModalVisible: boolean;
};

// 错误信息：<form>里面不能嵌套<form>
// 产生原因：ModalForm是带form的，ProTable的搜索框也是带form的，所以会报错。
// 需要把modalform变成modal

const ShowAppTypeModal: React.FC<ShowAppTypeModalProps> = (props) => {
    const intl = useIntl();
    const actionRef = useRef<ActionType>();

    const columns: ProColumns<API.AppTypeInfoListItem>[] = [
        {
            title: (
                <FormattedMessage
                    id="pages.listAppsInfoTable.id"
                    defaultMessage="ID"
                />
            ),
            dataIndex: 'id',
            tip: '数据库ID',
            search: false,
            width: 80,
        },
        {
            title: <FormattedMessage id="pages.listAppsInfoTable.apptype" defaultMessage="Appname" />,
            dataIndex: 'apptype',
            valueType: 'textarea',
        },
        {
            title: <FormattedMessage id="pages.listAppsInfoTable.solution" defaultMessage="AppType" />,
            dataIndex: 'solution',
            valueType: 'textarea',
        },
        {
            title: <FormattedMessage id="pages.listAppsInfoTable.version" defaultMessage="Version" />,
            dataIndex: 'version',
            valueType: 'textarea',
            search: false,
        },
        {
            title: <FormattedMessage id="pages.listAppsInfoTable.titleOption" defaultMessage="Operating" />,
            dataIndex: 'option',
            valueType: 'option',
            width: 80,
            render: (_, record) => [
                <a
                    key="chosen"
                    onClick={() => {
                        // 获取当前col的值
                        console.log("ShowAppTypeModal 表单: Event=chosen.onClick,value=", record);
                        props.onChoose(record);
                    }}
                >
                    <FormattedMessage id="pages.listAppsInfoTable.choose" defaultMessage="Choose" />
                </a>
            ]
        }
    ]

    return (
        <Modal
            title={intl.formatMessage({
                id: 'pages.showAppWizard.chooseTemplate.title',
                defaultMessage: 'New App',
            })}
            visible={props.showAppTypeModalVisible}
            // onVisibleChange={props.onVisibleChange}
            // onFinish={}
            //layout='horizontal'
            // 隐藏footer
            footer={null}
            destroyOnClose={true}
            forceRender={true}
            onCancel={props.onClose}
            width={800}
            bodyStyle={
                {
                    padding: '0px'
                }
            }
            zIndex={1001}

        >
            <ProTable<API.AppTypeInfoListItem, API.PageParams>
                headerTitle={intl.formatMessage({
                    id: 'pages.showAppTypeInfoTable.title',
                    defaultMessage: 'Apptype form',
                })}
                actionRef={actionRef}
                // rowKey表示每一行的key
                rowKey="id"
                search={{}}
                request={listAppTypeList}
                columns={columns}
                toolBarRender={() => []}
                tableLayout='auto'
            />
        </Modal>
    )
}
export default ShowAppTypeModal